<template>
    <div class="contentThree">
        <img src="../../../assets/img/2-indexMedia/dsp/1.png" alt="">
        <button v-for="(item,index) in list" :key="index" @mouseover="toggle(index)" class="btnAll" :class="{backgWhite:liIndex!=index,backgRed:liIndex==index}" @click="rout(index)">
            <img :src="item[0]">
            <span :class="{sizewhite:liIndex==index,sizeblack:liIndex!=index}">{{item[1]}}</span>
        </button>
	</div>
</template>
<script>
require("../../../assets/css/buttonCommon.css");
const img1 = require("../../../assets/img/2-indexMedia/dsp/2.png");
const img2 = require("../../../assets/img/2-indexMedia/dsp/4.png");
const img3 = require("../../../assets/img/2-indexMedia/dsp/3.png");
const img4 = require("../../../assets/img/2-indexMedia/dsp/5.png");
export default {
  data() {
    return {
      list: [[img1, "联系客服", img3], [img2, "查看详情", img4]],
      liIndex: 2
    };
  },
  methods: {
    toggle(index) {
      this.liIndex = index;
      this.list[0][0] = img1;
      this.list[1][0] = img2;
      this.list[index].splice(0, 1, this.list[index][2]);
    },
    rout(index) {
      if (index == 1) {
        this.$router.push({ path: "/view2/DSPSale", query: { type: "DSP" } });
      } else if (index == 0) {
        this.connectQQ();
      }
    }
  }
};
</script>

<style scoped>
.contentThree {
  width: 1000px;
  float: left;
  position: relative;
}
span {
  margin-left: 5px;
}
button.btnAll:nth-child(2) {
  position: absolute;
  right: 33px;
  bottom: 80px;
}
button.btnAll:nth-child(3) {
  position: absolute;
  right: 33px;
  bottom: 30px;
}
</style>

